<template>
	<view class="container" @tap.self="foldTap" @touchstart.self="foldTap">
		<view class="head">
			hahah
		</view>
		<scroll-view scroll-x scroll-y enable-flex
			style="width: 100%;height: 100vh;box-sizing: border-box;overflow:auto;" @scrolltolower="onScrollToLower"
			lower-threshold="50">
			<view v-if="list.length>0" class="main">
				<view class="cell" v-for="(item,index) in list" :key="index">
					<view class="cell-l">
						<image class="image" v-if="item.avatar" :src="item.avatar" mode="aspectFill" />
						<image class="image" v-else :src="avatarUrl" mode="aspectFill" />
					</view>
					<view class="cell-r">
						<view class="cell-r-head">
							<view class="cell-r-head-name">
								<view class="">
									{{item.nickName}}
								</view>
								<view class="cell-r-head-name-date">
									{{handleDate(item.createTime)}}
								</view>
							</view>
							<van-button v-if="item.phone" @click="callHe(item)" round plain size="small" icon="phone-o"
								type="danger">联系Ta</van-button>
						</view>
						<view class="cell-r-txt">
							<view v-html="item.content"></view>
						</view>
						<view class="cell-r-bot">
							<view class="cell-r-bot-date">
								{{handleDate(item.createTime)}}
								<!-- 1月前 -->
							</view>
							<!-- <view class="cell-r-bot-control">
								<div class="commentIcon" hover-class="commentIcon-hover"
									@tap.stop="toggleFold(item,index)" @touchstart.stop="toggleFold(item,index)">
									<div class="commentIcon-dot"></div>
									<div class="commentIcon-dot"></div>
								</div>
								<view class="float-box" :class="{ 'folded': item.isFolded }">
									<view class="content">
										<van-icon name="share-o" size="18" color="#fff" />
										<text>分享</text>
									</view>
									<view class="line"></view>
									<view class="content praise">
										<van-icon name="good-job-o" size="18" color="#fff" />
										<text>赞</text>
									</view>
									<view class="line"></view>
									<view class="content" @click="focusInput">
										<van-icon name="comment-o" size="18" color="#fff" />
										<text>评论</text>
									</view>
								</view>
							</view> -->
						</view>
					</view>
				</view>
				<view v-if="loading" class="loading">加载中...</view>
				<view v-if="page.pageIndex>=totalPages-1" class="loading">没有更多数据了</view>
			</view>
			<view v-else-if="!loading&&list.length==0" class="empty">
				<van-empty description="暂无数据" />
			</view>
		</scroll-view>
		<view class="input-box">
			<textarea ref="input" v-model="comment" placeholder="评论" :focus="isFocus" @blur="onBlur" class="inputArea"
				auto-height></textarea>
			<view class="send">
				<view v-if="true" class="send-btn">发送</view>
				<view v-else class="send-btn pre">发送</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getForumPosts,
		getForumComments
	} from '@/common/momentApi.js'

	import tool from "../../utils/common.js"
	export default {
		name: 'Moments',
		data() {
			return {
				key: 'value',
				page: {
					pageIndex: 0,
					pageSize: 15
				},
				totalPages: 0,
				loading: false,
				list: [{
					"id": 0,
					"userId": 0,
					"nickName": "猪猪侠 super",
					"avatar": "",
					"phone": "string",
					"content": "发表内容",
					"images": "string",
					"imageArr": [
						"string"
					],
					"likeCount": 0,
					"commentsCount": 0,
					"forwardCount": 0,
					"createTime": "2025-03-16T05:27:24.855Z",
					isFolded: true
				}],
				nickName: '',
				avatarUrl: '',
				isFolded: true,
				curIndex: null,
				comment: '',
				isFocus: false
			}
		},
		onPullDownRefresh() {
			console.log(1)
			setTimeout(() => {
				// 停止下拉刷新
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			console.log('底部')
		},
		onShow() {
			uni.getUserInfo({
				provider: 'weixin',
				success: (infoRes) => {
					console.log(infoRes); // 打印用户信息
					console.log('用户昵称为: ' + infoRes.userInfo.nickName); // 打印用户昵称
					// 在这里，你可以将用户的头像和昵称保存到本地或者发送到后端进行处理
					// infoRes.userInfo.avatarUrl是用户的头像链接
					// infoRes.userInfo.nickName是用户的昵称
					this.nickName = infoRes.userInfo.nickName
					this.avatarUrl = infoRes.userInfo.avatarUrl
				}
			})
		},
		onLoad() {
			this.getList()
		},
		methods: {
			onScrollToLower(event) {
				console.log(event)
				// if (event.detail.direction === 'bottom' && this.list.length > 0 && !this.loading) {
				// 	if (this.page.pageIndex >= this.totalPages - 1) return
				// 	this.page.pageIndex++
				// 	this.getList()
				// }
			},
			/* 获取列表数据 */
			async getList() {
				this.loading = true
				let params = {
					pageIndex: 0,
					pageSize: 10,
				}
				const res = await getForumPosts(params)
				console.log(res)
				for (let i = 0; i < 20; i++) {
					this.list.push(JSON.parse(JSON.stringify(this.list[0])))
				}
				// if (res.data) {
				// 	this.list.push(...res.data)
				// }
				// this.updateTime = res.updateTime
				// this.totalPages = res.totalPages
				this.loading = false
			},
			toggleFold(cell, index) {
				if (this.curIndex != index) {
					if (this.curIndex !== null) {
						this.list[+this.curIndex].isFolded = true
					}
					this.curIndex = index
					cell.isFolded = !cell.isFolded;
				} else {
					cell.isFolded = !cell.isFolded; // 切换折叠状态
				}

			},
			foldTap() {
				if (this.curIndex !== null) {
					this.list[+this.curIndex].isFolded = true
				}
			},
			// 联系Ta
			callHe(val) {
				tool.callPhone(val.phone)
			},
			// 评论
			focusInput() {
				this.isFocus = true; // 设置聚焦状态
			},
			// 点击按钮聚焦输入框
			focusInput() {
				this.isFocus = true; // 设置聚焦状态
			},

			// 输入框失去焦点时触发
			onBlur() {
				this.isFocus = false; // 取消聚焦状态
			},
			// 处理日期时间
			handleDate(val) {
				if (!val) return
				return tool.handleCommentDate(val)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		overflow-x: hidden;
		background-color: #fff;
		box-sizing: border-box;

		.cell {
			border-bottom: 1px solid #ebebeb;
			padding: 15px;
			box-sizing: border-box;
			display: flex;

			&-l {
				width: 60px;
				margin-right: 5px;

				.image {
					height: 50px;
					width: 50px;
					border-radius: 5px;
				}
			}

			&-r {
				flex: 1;
				padding-top: 5px;
				font-size: 16px;

				&-head {
					display: flex;
					justify-content: space-between;

					&-name {
						color: #5f688e;
						font-weight: bold;
						&-date{
							color: #8a8a8a;
							font-weight: normal;
							font-size: 12px;
							margin-top: 5px;
						}
					}
				}
				&-txt{
					margin-top: 10px;
				}
				&-bot {
					margin-top: 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;

					&-date {
						font-size: 13px;
						color: #8a8a8a;
					}
				}
			}
		}

		.loading {
			height: 45px;
			line-height: 45px;
			width: 100%;
			text-align: center;
			color: #a8a8a8;
		}

		.empty {
			padding-top: 45px;
			box-sizing: border-box;
			height: calc(100vh - 135px);
			text-align: center;
			color: #a8a8a8;
			font-size: 14px;
		}
	}

	.commentIcon {
		background-color: #eee;
		width: 30px;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 3px;

		&-dot {
			width: 4px;
			height: 4px;
			border-radius: 50%;
			background-color: #5f688e;
			margin: 0 2px;
		}
	}

	.commentIcon-hover {
		background-color: #ddd;
	}

	.float-box {
		width: 210px;
		height: 38px;
		background-color: #4c4c4c;
		color: #fff;
		overflow: hidden;
		transition: transform 0.3s ease, width 0.3s ease;
		;
		position: absolute;
		top: -8px;
		right: 35px;
		border-radius: 5px;
		display: flex;
		align-items: center;
		font-size: 13px;
		transform-origin: right;
		box-sizing: border-box;
		flex-wrap: nowrap;
		overflow: hidden;
	}

	.folded {
		width: 0;
		transform: scaleX(0);
	}

	.content {
		flex: 1;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		overflow: hidden;

		text {
			margin-left: 5px;
			white-space: nowrap;
		}
	}

	.line {
		width: 1px;
		height: 25px;
		background-color: #fff;
		opacity: 0.5;
	}

	.input-box {
		width: 100%;
		position: fixed;
		z-index: 9;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 10px 10px 10px 15px;
		display: flex;
		align-items: flex-end;
		background-color: #ececec;

		.inputArea {
			flex: 1;
			min-height: 45px;
			box-sizing: border-box;
			max-height: 200px;
			padding: 5px 5px 0;
			line-height: 45px;
			box-sizing: border-box;
			border: 1px solid #ccc;
			border-radius: 5px;
			background-color: #fff;
			overflow-y: auto;
		}

		.send {
			padding-left: 10px;
			padding-bottom: 5px;

			&-btn {
				width: 60px;
				height: 35px;
				text-align: center;
				line-height: 35px;
				background-color: #58be6b;
				color: #fff;
				border-radius: 5px;
			}
		}
	}
</style>